<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<!--<div class="userinfo">-->
<!--  <div class="name">zhangsan</div>-->
<!--  <p class="brief">简单介绍</p>-->
<!--</div>-->

<div id="app"></div>

<body>
  <script>
    const node = {
      tagName: "div",
      attr: {
        class: "userinfo"
      },
      children: [
        {
          tagName: "div",
          attr: {
            class: "name",
          },
          children: ["zhangsan"]
        },
        {
          tagName: "p",
          attr: {
            class: "brief",
          },
          children: ["简单介绍"]
        }
      ]
    }

    function createElement(data, parent) {
      let current
      if (typeof data === "string") {
        current = data
      } else {
        const { tagName, attr, children } = data
        current = document.createElement(tagName)
        Object.keys(attr).forEach(key => {
          current.setAttribute(key, attr[key])
        })
        if (children && children.length) {
          children.forEach(node => createElement(node, current))
        }
      }
      parent.append(current)
    }

    createElement(node, document.querySelector("#app"))
  </script>
</body>
</html>
